<template>
    <div>
      <el-input
        v-model="searchText"
        placeholder="请输入搜索关键字"
        clearable
        @clear="clearSearch"
        @keyup.enter="performSearch"
        style="margin-bottom: 20px"
      >
        <template #append>
          <el-button circle type="danger" @click="Getone(this.searchText)">
            <el-icon>
              <Search />
            </el-icon>
          </el-button>
        </template>
      </el-input>
    </div>
    <div>
      <el-table
        :data="paginatedData"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        border
      >
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="pid" label="上级菜单"></el-table-column>
        <el-table-column
          prop="type"
          label="类型:menu_dir=菜单目录,menu=菜单项,button=页面按钮"
        ></el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
  
        <el-table-column prop="name" label="规则名称"></el-table-column>
        <el-table-column prop="path" label="路由路径"></el-table-column>
        <el-table-column prop="icon" label="图标"></el-table-column>
        <el-table-column
          prop="menu_type"
          label="菜单类型:tab=选项卡,link=链接,iframe=Iframe"
        ></el-table-column>
  
        <el-table-column prop="url" label="Url"></el-table-column>
        <el-table-column prop="component" label="组件路径"></el-table-column>
        <el-table-column
          prop="keepalive"
          label="缓存:0=关闭,1=开启"
        ></el-table-column>
        <el-table-column
          prop="extend"
          label="扩展属性:none=无,add_rules_only=只添加为路由,add_menu_only=只添加为菜单"
        ></el-table-column>
  
        <el-table-column prop="remark" label="备注"></el-table-column>
        <el-table-column prop="weigh" label="权重(排序)"></el-table-column>
        <el-table-column
          prop="status"
          label="状态:0=禁用,1=启用"
        ></el-table-column>
        <el-table-column prop="updatetime" label="更新时间"></el-table-column>
  
        <el-table-column prop="createtime" label="创建时间"></el-table-column>
  
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button
              v-if="row.isNew"
              class="custom-button"
              type="success"
              circle
              @click="Insert(row)"
            >
              <el-icon>
                <Position />
              </el-icon>
            </el-button>
  
            <el-button
              v-else
              class="custom-button"
              type="warning"
              circle
              @click="Alter(row)"
            >
              <el-icon>
                <Position />
              </el-icon>
            </el-button>
  
            <el-button type="primary" circle @click="openEditDialog(row)">
              <el-icon>
                <EditPen />
              </el-icon>
            </el-button>
  
            <el-button
              type="danger"
              v-if="row.isNew"
              circle
              @click="deleteData(row)"
              ><el-icon>
                <Delete />
              </el-icon>
            </el-button>
            <el-button type="danger" v-else circle @click="deleteAPI(row)"
              ><el-icon>
                <Delete />
              </el-icon>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="filteredApiList.length"
        @current-change="handlePageChange"
      >
      </el-pagination>
      <el-button type="primary" circle @click="addAPI" style="margin-top: 10px">
        <el-icon>
          <CirclePlusFilled />
        </el-icon>
      </el-button>
  
      <el-button type="primary" circle @click="GetAll" style="margin-top: 10px">
        <el-icon>
          <RefreshRight />
        </el-icon>
      </el-button>
  
      <el-dialog v-model="editDialogVisible" title="编辑内容" center width="50%">
        <el-form :model="editedAPI" label-width="100px">
          <el-form-item label="id">
            <el-input v-model="editedAPI.ID" disabled></el-input>
          </el-form-item>
  
          <el-form-item label="pid">
            <el-input v-model="editedAPI.pid"></el-input>
          </el-form-item>
          <el-form-item label="type">
            <el-input v-model="editedAPI.type"></el-input>
          </el-form-item>
          <el-form-item label="title">
            <el-input v-model="editedAPI.title"></el-input>
          </el-form-item>
  
          <el-form-item label="name">
            <el-input v-model="editedAPI.name"></el-input>
          </el-form-item>
          <el-form-item label="path">
            <el-input v-model="editedAPI.path"></el-input>
          </el-form-item>
          <el-form-item label="icon">
            <el-input v-model="editedAPI.icon"></el-input>
          </el-form-item>
  
          <el-form-item label="menu_type">
            <el-input v-model="editedAPI.menu_type"></el-input>
          </el-form-item>
          <el-form-item label="url">
            <el-input v-model="editedAPI.url"></el-input>
          </el-form-item>
          <el-form-item label="component">
            <el-input v-model="editedAPI.component"></el-input>
          </el-form-item>
  
          <el-form-item label="keepalive">
            <el-input v-model="editedAPI.keepalive"></el-input>
          </el-form-item>
          <el-form-item label="extend">
            <el-input v-model="editedAPI.extend"></el-input>
          </el-form-item>
          <el-form-item label="remark">
            <el-input v-model="editedAPI.remark"></el-input>
          </el-form-item>
  
          <el-form-item label="weigh">
            <el-input v-model="editedAPI.weigh"></el-input>
          </el-form-item>
  
          <el-form-item label="status">
            <el-input v-model="editedAPI.status"></el-input>
          </el-form-item>
          <el-form-item label="updatetime">
            <el-input v-model="editedAPI.updatetime"></el-input>
          </el-form-item>
          <el-form-item label="createtime">
            <el-input v-model="editedAPI.createtime"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="Cancel">取消</el-button>
            <el-button type="primary" @click="Save"> 保存 </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { ElMessageBox, ElMessage } from "element-plus";
  import api from "@/http/menu_rule.js";
  
  export default {
    created() {
      this.GetAll();
    },
    computed: {
      paginatedData() {
        const startIndex = (this.currentPage - 1) * this.pageSize;
        const endIndex = startIndex + this.pageSize;
        return this.filteredApiList.slice(startIndex, endIndex);
      },
      filteredApiList() {
        if (this.searchText && this.apiList) {
          // 使用 Array.prototype.filter() 方法过滤数据
          return this.apiList.filter((item) => {
            return item.id == this.searchText;
          });
        } else {
          // 如果搜索条件为空，返回原始数据源
          return this.apiList;
        }
      },
    },
  
    data() {
      return {
        editedAPI: {}, //当前数据缓存
        editDialogVisible: false, //修改弹窗显示
        currentPage: 1, // 当前页码
        pageSize: 6, // 每页显示的数据条数
        searchText: "", // 搜索关键字
        apiList: [], // 原始数据列表
      };
    },
    methods: {
      handlePageChange(currentPage) {
        this.currentPage = currentPage;
      },
      // 清空搜索关键字
      clearSearch() {
        this.searchText = "";
      },
      Cancel() {
        this.editDialogVisible = false;
        ElMessage.info("保存取消！");
      },
      Getone(id) {
        (this.apiList = []),
          api
            .getOneData(id)
            .then((response) => {
              console.log("搜索成功！");
              ElMessage.success("搜索成功！");
              const backendApis = response.data.backendApi;
              this.apiList.push(backendApis);
            })
            .catch((error) => {
              ElMessage.error("搜索失败！");
              console.log("搜索失败！");
            });
      },
      Save() {
        // 保存编辑后的数据
        console.log("Saving API:", this.editedAPI);
        const index = this.apiList.findIndex(
          (item) => item.id === this.editedAPI.id
        );
        if (index !== -1) {
          // 替换原有的数据
          this.apiList.splice(index, 1, this.editedAPI);
        } else {
          // 添加编辑后的数据
          this.apiList.push(this.editedAPI);
        }
        this.editDialogVisible = false;
        ElMessage.success("保存成功！");
      },
      openEditDialog(row) {
        this.editedAPI = { ...row };
        this.editDialogVisible = true;
      },
  
      editAPI(api) {
        // 处理编辑逻辑，可以在这里打开编辑对话框或跳转到编辑页面
        console.log("编辑 API", api);
      },
      deleteAPI(row) {
        ElMessageBox.confirm("确定要删除吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            api
              .delData(row.id)
              .then((response) => {
                if (response.success) {
                  // 处理删除成功的情况
                  // 用户点击了确定按钮，执行删除操作
                  const index = this.apiList.findIndex(
                    (api) => api.id === row.id
                  );
                  if (index !== -1) {
                    this.apiList.splice(index, 1); // 从数据源中删除API对象
                  }
                  console.log("删除成功");
                  ElMessage.success("删除成功！");
                } else {
                  // 处理删除失败的情况
                  ElMessage.error(response.msg);
  
                  console.error(response.msg);
                }
              })
              .catch((error) => {
                // 处理请求异常
                console.error(error);
              });
            console.log("删除 API");
          })
          .catch((e) => {
            // 取消删除操作
            console.log("不删除 API", e);
          });
      },
      deleteData(row) {
        // 在这里处理删除逻辑，可以在确认后从数据源中删除API对象或向服务器发送删除请求
        // 这里使用 Element Plus 的 ElMessageBox 弹窗组件来确认删除操作
        ElMessageBox.confirm("确定要删除吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            // 用户点击了确定按钮，执行删除操作
            const index = this.apiList.findIndex((api) => api.id === row.id);
            if (index !== -1) {
              this.apiList.splice(index, 1); // 从数据源中删除API对象
            }
            ElMessage.success("删除成功！");
          })
  
          .catch(() => {
            ElMessage.error("删除失败！");
  
            // 用户点击了取消按钮，取消删除操作
            console.log("取消删除 API", row);
          });
      },
  
      // 可以添加其他方法来实现创建和查看功能
      addAPI() {
        ElMessage.success("添加数据ing");
        const newAPI = {
          component: "",
          createTime: "",
          extend: "",
          icon: "",
          id: 0,
          keepalive: 0,
          menuType: "",
          name: "",
          path: "",
          pid: 0,
          remark: "",
          status: "",
          title: "",
          type: "",
          updateTime: "",
          url: "",
          weigh: 0,
          isNew: true, // 新添加的数据标识
        };
        this.apiList.push(newAPI);
      },
      async GetAll() {
        try {
          this.clearSearch();
          const response = await api.getAllData();
          if (response.success) {
            // 获取返回的数据
            const backendApis = response.data.backendApis;
  
            // 在这里处理获取到的数据，可以进行赋值或其他操作
            this.apiList = backendApis;
            ElMessage.success("刷新成功！");
          } else {
            // 处理请求失败的情况
            ElMessage.error("请求失败！");
  
            console.error(response.msg);
          }
        } catch (error) {
          // 处理请求异常
          console.error(error);
        }
      },
  
      Insert(row) {
        api
          .addData(row)
          .then((response) => {
            delete row.isNew;
            ElMessage.success("添加成功！");
  
            console.log("添加成功！");
          })
          .catch((error) => {
            ElMessage.error("添加失败！");
  
            console.log("添加失败！");
            // 添加失败后的处理逻辑
          });
      },
      Alter(row) {
        api
          .editData(row)
          .then((response) => {
            console.log("修改成功！");
            ElMessage.success("修改成功！");
          })
          .catch((error) => {
            console.log("修改失败！");
            ElMessage.error("修改失败！");
  
            // 添加失败后的处理逻辑
          });
      },
    },
  };
  </script>
  <style>
  body {
    margin: 0;
    padding: 0;
    background-image: url("@/imgs/keli.png");
    background-size: cover;
    opacity: 0.9 !important; /* 使用 !important 提高优先级 */
    background-repeat: no-repeat;
  }
  </style>